Vue使用Element实现增删改查+打包

2023-12-30 15:36| 来源: 网络整理| 查看: 265

在我们进行项目开发期间，避免不了使用各式各样的组件，Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。

效果：

效果组件使用

我们利用vue-cli创建一个项目，然后只需要安装element-ui即可

安装：npm i element-ui -S

然后在main.js中引用一下样式即可，可以选择按需加载，我们这边因为是演示一下，所以不去进行调整，项目中如果使用到的组件不多，可以选择按需加载。

main.jsimport Vue from 'vue'; import App from './App.vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false; Vue.use(ElementUI); new Vue({ render: h => h(App), }).$mount('#app')

然后我们在src/components下新建一个组件，用来写我们的展示组件，然后在app.vue中导入即可

app.vue import Creator from './components/Creator/Creator'; export default { name: 'app', components: { Creator } }

我们首先先使用表格，将数据展示出来

Creator.vue 搜索添加删除 // rules指定表单验证规则取消确定 export default { props: { content1: {required: true, type: String} }, data() { // 自定义验证函数给name验证 const validatName = (rule, value, callback) => { if (!value) return callback(new Error('名字不能为空')); if (value.length Date.now(); }, // 增加今天昨天一周前的快速选项 shortcuts: [{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } }, { text: '昨天', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); picker.$emit('pick', date); } }, { text: '一周前', onClick(picker) { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', date); } }] }, // 定义输入规则 rules: { name: [ // 指定验证函数触发时机。这个是失去焦点触发 {validator: validatName, trigger: 'blur'} ], }, }; }, methods: { onOk() { // 使用ref进行验证 validate传入一个函数返回一个验证是否成功的bool值 this.$refs['ruleForm'].validate((valid) => { if (valid) { const { name, dates } = this.form; // 避免zip重复 zip++ const maxZip = Math.max(...this.tableData.map(item => item.zip)) + 1; const obj = { name, date: dates, province: '北京', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: maxZip }; // push到数据里面 this.tableData.push(obj); // 将模态隐藏 this.dialogFormVisible = false; } else { return false; } }); }, // 删除数据 handleDelete(row) { this.tableData.map((item, index) => { if (item.zip === row.zip) { this.tableData.splice(index, 1); } }); }, handleCreate() { // 模态展示 this.dialogFormVisible = true; } } };

一套基本的增删改查就可以了呀，Vue有一套admin模版，开箱即用。 vue-element-admin非常不错，大家可以去使用一下子

打包

默认打包的话会导致静态资源引用存在问题，打开一片空白，所以我们打包前需要先配置一下静态资源在package.json这个文件同级的目录，新建一个vue.config.js，加入如下配置

/** * Created By 憧憬 */ module.exports = { publicPath: './' // 静态资源目录配置为./ 当前目录 };

本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。

【本文地址】

公司简介

联系我们